Web Graphics, JPG vs. GIF vs. PNG

The goal of every web designer is to have images that look good, while having the smallest file size possible. There are three popular graphic compression formats available for web designers to use. These are GIF, JPG, and PNG.

The question that every new web designer faces is, what graphic format should they use for their website. The quick and dirty answer is, use JPG for photographs, and use GIF for buttons, and other web page graphics.

The GIF Format

Graphics Interchange Format, uses the compression algorithm owned by Unisys. The GIF format is a lossless compression technique that only displays 256 colors. GIF works well for images with only a few distinct colors, such as line drawings, buttons or small text. GIF images can be animated. (See my thoughts on animated gifs - Luke's Web Design Peeves) GIF also supports transparency, so the color on the underlying Web page can show through.

The JPEG/JPG Format

Joint Photographic Experts Group, the committee that wrote the JPEG standard. JPG is a lossy compression technique, it discards information that the human eye cannot detect. JPG images support 16 million colors, and best suited for photographs.

The PNG Format

Portable Network Graphics, the newest Web graphics standard (not supported by all browsers). PNG was developed as a patent-free alternative to the GIF format, and as an improvement on the GIF. An image in a lossless PNG file can be 5%-25% more compressed than a GIF file of the same image. PNG opacity that allows the control of the degree of transparency. PNG does not support animation.

Example - with buttons or graphics with solid colors GIF is superior to JPG

GIF - 1.93 kb For graphics with solid colors GIF is superior to JPG.  Notice how the JPG versions of this graphic is either much larger, or has horrible quality.

JPG - 5.12 kb Even though the quality of this image is equivalent to the GIF version, the file size is more than double.

JPG - 2.02 kb Even though the file size is equivalent to the GIF image, the quality is unacceptable.

Example - with photographs JPG is superior to GIF

JPG - 4.14 kb For photographs, JPG is much better than GIF.  Notice how the GIF versions of this graphic is either much larger, or has horrible quality.

GIF - 25.6 kb Even though this image looks as good as the JPG version, it's file size is 6 times larger.

GIF - 4.43 kb This GIF image file size is about the same as the JPG version, but the image quality is horrible

Toolbox - Luke Spence